<template>
    <div>
        <!-- 设置抽屉面板 -->
        <a-drawer
                placement="right"
                :closable="true"
                v-model:visible="drawer.state"
                :width="drawer.width"
                class="setting-drawer no-select"
                @close="closeDrawer"
        >
            <a-tabs v-model:activeKey="drawer.activeKey">
                <!-- 常规 -->
                <a-tab-pane key="1" tab="常规">
                    <Base></Base>
                </a-tab-pane>
                <!-- 主题壁纸 -->
                <a-tab-pane key="2" tab="主题&壁纸">
                    <Theme></Theme>
                </a-tab-pane>
                <!-- 其它设置 -->
                <!-- <a-tab-pane key="3" tab="其它">
                    <Other></Other>
                </a-tab-pane> -->
            </a-tabs>

        </a-drawer>
    </div>
</template>

<script>
    import {out} from "/src/request/api/user";
    import website from "/src/config/website";
    import {isChrome, getConfig, goUrl} from "/src/util";
    import {useStore} from "vuex";

    // content
    import Base from './Base.vue';
    import Theme from './Theme.vue';
    import Other from './Other.vue';

    // iconfont
    import {createFromIconfontCN} from '@ant-design/icons-vue';

    const IconFont = createFromIconfontCN({scriptUrl: website.iconfontUrl});
    let config = getConfig();

    export default {
        name: "settingLayout",
        // 组件
        components: {
            IconFont,
            Base,
            Theme,
            Other,
        },
        // 数据
        data() {
            return {
                // vuex 状态
                store: useStore().state,

                // drawer
                drawer: {
                    state: false,
                    width: 400,
                    activeKey: "1",
                    config: {},

                    labelCol: {span: 10},
                    wrapperCol: {span: 14},
                    value: 2,
                    data: [
                        'Racing car sprays',
                        'Japanese princess',
                        'Los Angeles',
                    ],
                    space: 16,

                    // 引擎
                    engine: [],
                },
            }
        },
        // DOM未渲染前调用
        created() {
            this.init();
        },
        // DOM渲染后调用
        mounted() {

        },
        // 方法
        methods: {
            // init
            init() {
                let that = this,
                    userInfo = localStorage.getItem(website.info),
                    engine = localStorage.getItem(website.engine),
                    width = window.innerWidth;

                that.drawer.config = config || {};
                that.userInfo = userInfo ? JSON.parse(userInfo) : null;
                that.drawer.engine = engine ? JSON.parse(engine) : null;
                that.drawer.width = width <= 400 ? width : 400;
            },
            // 页面切换
            pageHref(url) {
                goUrl(url);
            },
            // 抽屉隐藏回调
            closeDrawer() {
                // console.log('closeDrawer');
                this.$store.commit('openSettingPanel', false);
            },
        },
        watch: {
            // settingPanel 变化
            '$store.state.settingPanel'(val) {
                this.drawer.state = val;
            },
        },
    }
</script>

<style lang="less">
    @activeColor: #1890ff;

    .setting-drawer {
        .ant-tabs {
            overflow: initial;

            .ant-tabs-tabpane {

                .item-select {
                    min-width: 90px;
                }
            }
        }
    }

    .ant-divider-horizontal {
        margin: 10px 0;
    }
</style>